<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ include file="/WEB-INF/jsp/commons/includes.jsp" %>

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>编辑田字格</title>
    <jsp:include page="../header.jsp"/>
</head>
<body>
<!-- 头部 -->
<div class="header">

</div>
<!-- /头部 -->

<!-- 边栏 -->

<!-- /边栏 -->

<!-- 内容区 -->
<div id="main-content">
    <div id="top-alert" class="fixed alert alert-error" style="width: 100%; display: none;">
        <button class="close fixed" style="margin-top: 4px;">&times;</button>
        <div class="alert-content"></div>
    </div>
    <div id="main" class="main">
        <!-- nav -->
        <!-- nav -->
        <script type="text/javascript" src="${ctx}/static/uploadify/jquery.uploadify.min.js"></script>
        <div class="main-title cf">
            <h2>
                田字格 -> 编辑
            </h2>
        </div>
        <!-- 标签页导航 -->
        <div class="tab-wrap">
            <ul class="tab-nav nav">
                <li data-tab="tab1" class="current"><a href="javascript:void(0);">基本信息</a></li>
                <li data-tab="tab2" ><a href="javascript:void(0);">附加</a></li>
            </ul>

            <div class="tab-content">
                <!-- 表单 -->
                <form id="form" action="${ctx}/admin/matts/edit/${info.originalId}/${info.id}.shtml" method="post" class="form-horizontal">

                    <!-- 基础文档模型 -->
                    <div id="tab1" class="tab-pane in tab1">
                        <div class="form-item cf">
                            <label class="item-label">文字</label>
                            <div class="controls">
                                <input type="text" class="text input-large" name="dspTxt" value="${info.dspTxt}">
                            </div>
                        </div>

                        <div class="form-item cf">
                            <label class="item-label">拼音</label>
                            <div class="controls">
                                <input type="text" class="text input-large" name="dspSubTxt" value="${info.dspSubTxt}">
                            </div>
                        </div>

                        <div class="form-item cf">
                            <label class="item-label">排序</label>
                            <div class="controls">
                                <input type="text" class="text input-small" name="dspSort" value="${info.dspSort}">
                            </div>
                        </div>

                        <div class="form-item cf">
                            <label class="item-label">图片</label>
                            <div class="controls">
                                <div class="controls">
                                    <input type="file" id="upload_picture">
                                    <input type="hidden" name="recId" id="recId" value="${info.recId}"/>
                                    <input type="hidden" name="recType" id="recType" value="00"/>
                                    <div class="controls">
                                        <input type="text" class="text input-large" disabled="disabled" value="${info.picName}">
                                    </div>
                                </div>

                                <script type="text/javascript">
                                    //上传图片
                                    /* 初始化上传插件 */
                                    $("#upload_picture").uploadify({
                                        "height"          : 30,
                                        "swf"             : "${ctx}/static/uploadify/uploadify.swf",
                                        "buttonText"      : "上传图片",
                                        "uploader"        : "${ctx}/mediares/upload.shtml",
                                        "width"           : 120,
                                        'removeTimeout'	  : 1,
                                        'fileTypeExts'	  : '*.png',
                                        'multi'           : false,
                                        "onUploadSuccess" : uploadPictureSuccess,
                                        'onFallback' : function() {
                                            alert('未检测到兼容版本的Flash.');
                                        },
                                        'onUploadError' : function() {
                                            alert('最多上传1个文件.');
                                        }
                                    });
                                    function uploadPictureSuccess(file, data){
                                        var data = $.parseJSON(data);
                                        var src = '';
                                        if (data.result == 'success') {
                                            $("#upload_picture").parent().find('.text').val(
                                                data.filesName
                                            );
                                            $("#upload_picture").parent().find('#recId').val(
                                                    data.filesUUID
                                            );
                                        } else {
                                        }
                                    }
                                </script>
                            </div>
                        </div>
                    </div>

                    <div id="tab2" class="tab-pane tab2">
                        <div class="form-item cf">
                            <label class="item-label">文章内容<span class="check-tips"></span></label>
                            <div class="controls">
                                <label class="textarea">
                                    <textarea name="content">
                                    </textarea>

                                    <input type="hidden" name="parse" value="0"/>
                                    <link rel="stylesheet" href="${ctx}/static/kindeditor/default/default.css" />
                                    <script charset="utf-8" src="${ctx}/static/kindeditor/kindeditor-min.js"></script>
                                    <script charset="utf-8" src="${ctx}/static/kindeditor/zh_CN.js"></script>
                                    <script type="text/javascript">
                                        var editor_content;
                                        KindEditor.ready(function(K) {
                                            editor_content = K.create('textarea[name="content"]', {
                                                allowFileManager : false,
                                                themesPath: K.basePath,
                                                width: '100%',
                                                height: '500px',
                                                resizeType: 1,
                                                pasteType : 2,
                                                urlType : 'absolute',
                                                fileManagerJson : '/ot/admin.php?s=/Article/fileManagerJson.html',
                                                //uploadJson : '/ot/admin.php?s=/Article/uploadJson.html' }
                                                //uploadJson : '/ot/admin.php?s=/Addons/execute/_addons/EditorForAdmin/_controller/Upload/_action/ke_upimg.html',
                                                extraFileUploadParams: {
                                                    session_id : '4pcs0ppja39ve7lecjbob3l250'
                                                }
                                            });
                                        });

                                        $(function(){
                                            //传统表单提交同步
                                            $('textarea[name="content"]').closest('form').submit(function(){
                                                editor_content.sync();
                                            });
                                            //ajax提交之前同步
                                            $('button[type="submit"],#submit,.ajax-post,#autoSave').click(function(){
                                                editor_content.sync();
                                            });
                                        })
                                    </script>
                                </label>
                            </div>
                        </div>
                    </div>


                    <div class="form-item cf">
                        <input type="hidden" name="id" value="${info.id}"/>
                        <input type="hidden" name="originalId" value="${info.originalId}"/>

                        <button class="btn submit-btn ajax-post hidden" id="submit" type="submit" target-form="form-horizontal">确 定</button>
                        <a class="btn btn-return" href="${ctx}/admin/matts/index/${info.originalId}.shtml">返 回</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="cont-ft">
        <div class="copyright">
            <div class="fl">感谢使用管理平台</div>
            <div class="fr">V1.0</div>
        </div>
    </div>
</div>

<!-- /内容区 -->

<script type="text/javascript" src="${ctx}/admin/js/common.js"></script>
<script type="text/javascript">
    +function(){
        var $window = $(window), $subnav = $("#subnav"), url;
        $window.resize(function(){
            $("#main").css("min-height", $window.height() - 130);
        }).resize();

        /* 左边菜单高亮 */
        url = window.location.pathname + window.location.search;
        console.log(url);
        console.log(window.location.pathname);
        console.log(window.location.search);
        // url = url.replace(/(\/(p)\/\d+)|(&p=\d+)|(\/(id)\/\d+)|(&id=\d+)|(\/(group)\/\d+)|(&group=\d+)/, "");
        url = url.replace(/\/([a-zA-Z 0-9]+)\/([a-zA-Z 0-9]+)\/([a-zA-Z 0-9]+).+/, "/$1/$2/$3/index.shtml");
        console.log("url2=" + url);
        $subnav.find("a[href='" + url + "']").parent().addClass("current");

        /* 左边菜单显示收起 */
        $("#subnav").on("click", "h3", function(){
            var $this = $(this);
            $this.find(".icon").toggleClass("icon-fold");
            $this.next().slideToggle("fast").siblings(".side-sub-menu:visible").
            prev("h3").find("i").addClass("icon-fold").end().end().hide();
        });

        $("#subnav h3 a").click(function(e){e.stopPropagation()});

        /* 头部管理员菜单 */
        $(".user-bar").mouseenter(function(){
            var userMenu = $(this).children(".user-menu ");
            userMenu.removeClass("hidden");
            clearTimeout(userMenu.data("timeout"));
        }).mouseleave(function(){
            var userMenu = $(this).children(".user-menu");
            userMenu.data("timeout") && clearTimeout(userMenu.data("timeout"));
            userMenu.data("timeout", setTimeout(function(){userMenu.addClass("hidden")}, 100));
        });

        /* 表单获取焦点变色 */
        $("form").on("focus", "input", function(){
            $(this).addClass('focus');
        }).on("blur","input",function(){
            $(this).removeClass('focus');
        });
        $("form").on("focus", "textarea", function(){
            $(this).closest('label').addClass('focus');
        }).on("blur","textarea",function(){
            $(this).closest('label').removeClass('focus');
        });

        // 导航栏超出窗口高度后的模拟滚动条
        var sHeight = $(".sidebar").height();
        var subHeight  = $(".subnav").height();
        var diff = subHeight - sHeight; //250
        var sub = $(".subnav");
        if(diff > 0){
            $(window).mousewheel(function(event, delta){
                if(delta>0){
                    if(parseInt(sub.css('marginTop'))>-10){
                        sub.css('marginTop','0px');
                    }else{
                        sub.css('marginTop','+='+10);
                    }
                }else{
                    if(parseInt(sub.css('marginTop'))<'-'+(diff-10)){
                        sub.css('marginTop','-'+(diff-10));
                    }else{
                        sub.css('marginTop','-='+10);
                    }
                }
            });
        }
    }();
</script>

<link href="${ctx}/static/datetimepicker/css/datetimepicker.css" rel="stylesheet" type="text/css">
<link href="${ctx}/static/datetimepicker/css/dropdown.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${ctx}/static/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="${ctx}/static/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript">
    $('#submit').click(function(){
        $('#form').submit();
    });

    $(function(){
        $('.date').datetimepicker({
            format: 'yyyy-mm-dd',
            language:"zh-CN",
            minView:2,
            autoclose:true
        });
        $('.time').datetimepicker({
            format: 'yyyy-mm-dd hh:ii',
            language:"zh-CN",
            minView:2,
            autoclose:true
        });
        showTab();


    });
</script>

</body>
</html>